<template>
	<div class="articles">
		<div class="site-content animate">
			<main class="site-main">
				<article class="hentry">
					<header class="entry-header">
						<h1 class="entry-title">{{ dynamicInfo.title }}</h1>
						<hr>
						<div class="breadcrumbs">
							<span>{{ dynamicInfo.authorName }}</span>
							<span style="float: right">发布时间：{{ dynamicInfo.creationTime }}</span>
						</div>
					</header>
					<md-editor-v3
						v-model="dynamicInfo.content"
						style="text-align-all: left"
						preview-only>
					</md-editor-v3>
					<section-title>
						<footer class="post-footer">
							<!-- 阅读次数 -->
							
							<div class="post-like">
								<span style="justify-content: left;width: 60px;display: inline-flex;">
									<icon-good-two
										style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
										theme="outline" size="16" fill="#333"/>{{ dynamicInfo.viewNumber }}
								</span>
								<span style="justify-content: left;width: 60px;display: inline-flex;">
									<icon-bad-two
										style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
										theme="outline" size="16" fill="#333"/>{{ dynamicInfo.viewNumber }}
								</span>
								<span style="justify-content: left;width: 60px;display: inline-flex;">
									<icon-preview-open
										style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
										theme="outline" size="16" fill="#333"/>{{ dynamicInfo.viewNumber }}
								</span>
								<span style="justify-content: left;width: 60px;display: inline-flex;">
									<icon-share
										style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
										theme="outline" size="16" fill="#333"/>{{ dynamicInfo.viewNumber }}
								</span>
							</div>
						</footer>
					</section-title>
				</article>
			</main>
		</div>
	</div>
</template>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import SectionTitle from "@/components/section-title.vue";
import request from "@/utils/request";
import {Result} from "@/vite-env";

const dynamicInfo = reactive({
	id: useRoute().params.id,
	content: '加载中...',
	creationTime: '加载中...',
	actionNumber: '加载中...',
	forwardNumber: '加载中...',
	title: '加载中...',
	replyNumber: '加载中...',
	viewNumber: '加载中...',
	authorName: '加载中...',
});
const init = () => {
	console.log(dynamicInfo.id);
	request.get<any, Result>(`/dynamic/action/get/${dynamicInfo.id}`).then((v) => {
		Object.assign(dynamicInfo, v.data);
		console.log(dynamicInfo);
		// v.data.forEach((v) =>)
		// dynamicInfo = v.data;
	})
}
init();

</script>

<style scoped lang="less">
.site-content {
	position: relative;
	
	.site-main {
		padding: 80px 0 0 0;
	}
}

#article-menus {
	position: sticky;
	top: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	border-radius: 3px;
	padding: 15px;
	width: 300px;
	transform: translateX(-120%) translateY(150px);
	font-size: 14px;
}

article.hentry {
	.entry-header {
		.entry-title {
			font-size: 23px;
			font-weight: 600;
			color: #737373;
			margin: 0.67em 0;
			
			&:before {
				content: "#";
				margin-right: 6px;
				color: #d82e16;
				font-size: 20px;
				font-weight: 600;
			}
		}
		
		hr {
			height: 1px;
			border: 0;
			background: #EFEFEF;
			margin: 15px 0;
		}
		
		.breadcrumbs {
			font-size: 14px;
			color: #D2D2D2;
			text-decoration: none;
			margin-bottom: 30px;
		}
	}
	
	.entry-content {
	}
	
	footer.post-footer {
		width: 100%;
		padding: 20px 10px;
		margin-top: 30px;
		height: 65px;
		position: relative;
		
		i {
			font-size: 18px;
			margin-right: 5px;
		}
		
		.post-like {
			float: right;
			margin: 7px 0 0 20px;
			span {
				span {
					cursor: pointer
				}
				
			}
		}
		
		.post-share {
			float: right;
			list-style: none;
			margin-right: 20px;
		}
		
		.donate {
			float: left;
			line-height: 36px;
			border-radius: 100%;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border: 1px solid #2B2B2B;
			
			&:hover {
				border: 1px solid goldenrod;
				
				span {
					color: goldenrod;
				}
			}
			
			span {
				color: #2B2B2B;
				padding: 10px;
				position: relative;
				cursor: pointer;
			}
			
			.donate_inner {
				display: none;
				margin: 0;
				list-style: none;
				position: absolute;
				left: 80px;
				top: -40px;
				background: #FFF;
				padding: 10px;
				border: 1px solid #ddd;
				box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
				border-radius: 3px;
				
				&.show {
					display: block;
				}
				
				li {
					float: left;
				}
				
				img {
					width: 100px;
				}
				
				p {
					text-align: center;
					font-size: 15px;
					color: #D2D2D2;
					line-height: 1rem;
				}
			}
			
			.donate_inner:after, .donate_inner:before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 45%;
				margin-left: -8px;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-right: 8px solid #fff;
			}
			
			.donate_inner:before {
				left: -1px;
				border-right: 8px solid #ddd;
			}
			
		}
		
		.post-tags {
			margin: 7px 0 0 20px;
			float: left;
			text-transform: uppercase;
			
			a:hover {
				color: #ff6d6d;
			}
		}
	}
	
	.open-message {
		margin: 50px 0;
		position: relative;
		background: #2B2B2B;
		padding: 10px 30px;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
		
		&:after {
			content: "";
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #2B2B2B;
			position: absolute;
			top: -8px;
			left: 48%;
		}
		
		p {
			margin: 10px 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		a {
			color: #A0DAD0;
			padding: 0 5px;
		}
	}
}

@media (max-width: 1490px) {
	#article-menus {
		display: none;
	}
}

@media (max-width: 800px) {
	#article-menus {
		display: none;
	}
}
</style>